<!--表单选择组件-->
<template>
  <div>
    <!-- <el-form-item :label="config.label" :rules="config.rules" :label-width="config.labelW" :class="formItemClass" :prop="config.name" :style="config.formItemStyle" class="form-ele-cls"> -->
    <el-select v-model="form.data.select" :size="config.size" :disabled="disabled" :filterable="filterable" :class="config.childClass" :placeholder="config.placeholder" :style="config.childStyle || {}">
      <!-- :class="{'has-prefix-icon':config.prefixIcon}" -->
      <!-- option的 value 必须是字符类型，才能正常显示 label和value -->
      <el-option v-for="(item) in array" :key="item.value" :label="item.label" :value="''+item.value" />
    </el-select>
    <!-- 前缀图标 -->
    <i v-if="prefixIcon" :class="prefixIcon" class="prefixIcon-cls el-input__icon iconfont" ></i>
    <slot name="other" ></slot>
  <!-- </el-form-item> -->
  </div>

</template>

<script>
// import common from '@/utils/open/common'
export default {
  name: 'FormSelect',
  props: {
    // 参数设置
    config: {
      type: Object,
      required: false,
      default: () => {
        return {
          label: '下拉框',
          name: 'select',
          placeholder: '请选择下拉框',
          rules: [
            { required: true, message: '请选择下拉框', trigger: 'change' }
          ],
          array: [],
          disabled: false
        }
      }
    },
    // 能否编辑
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否能过滤
    filterable: {
      type: Boolean,
      required: false,
      default: false
    },
    data: {
      type: [String, Number],
      required: false,
      default: ''
    },
    idx: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      form: {
        data: {
          select: ''
        }
      },
      array: []
    }
  },
  computed: {
    // 前缀icon
    prefixIcon () {
      let cls = this.config.prefixIcon
      if (cls) {
        cls = cls.split(',')
      }
      return cls
    },
    formItemClass () {
      let clsStr = this.$common.deepCloneObj(this.config.formItemClass)
      if (this.config.prefixIcon) {
        // debugger
        if (clsStr) {
          const type = this.$common.getType(clsStr)
          // debugger
          if (type === 'array') {
            clsStr.push('has-prefix-icon')
          } else if (type === 'object') {
            clsStr['has-prefix-icon'] = true
          }
        } else {
          clsStr = ['has-prefix-icon']
          // debugger
        }
      }
      // debugger
      return clsStr
    },
    selectStyleObj () {
      const obj = this.styleObj
      let labelW = 0
      if (!this.$validate.isNull(this.config.labelW)) {
        labelW = parseInt(this.config.labelW)
      }
      if (this.styleObj && !this.validate.isNull(this.styleObj.width)) {
        const w = parseInt(this.styleObj.width)
        obj.width = w + labelW + 'px'
      }
      return obj
    }
  },
  watch: {
    data: {
      handler (val) {
        // debugger
        // if (this.$validate.isNull(val)) return
        // debugger
        this.form.data.select = val && val.toString()
        // this.$emit('updateForm', this.config.name, this.form.data.select, this.idx, this.config)
      },
      deep: true,
      immediate: true
    },
    config: {
      handler (val) {
        // debugger
        if (val.array.length > 0) {
          this.array = val.array
        } else {
          this.array = []
        }
      },
      deep: true, // 对对象进行深入监听，数组不需要深度监听
      immediate: true // 最初绑定值也执行函数
    },
    form: {
      handler (val) {
        // debugger
        this.$emit('updateForm', this.config.name, this.form.data.select, this.idx, this.config)
        if (this.form.data.select !== '') {
          const obj = this.array.find(item => {
            return item.value === this.form.data.select
          })
          this.$emit('getSelected', this.config.name, obj)
        }
      },
      deep: true
    }
  },
  mounted () {
    this.form.data.select = this.data
  },
  methods: {
    /**
     * 当传入的参数配置array为''且dicKey的值不为空，请求获取dicKey的数据字典
     */
    // getDic () {
    //   debugger
    //   const ar = this.config.array
    //   if (ar.length > 0) {
    //     this.array = ar
    //     return
    //   }
    //   if (!common.validate.isNull(this.config.dicKey)) {
    //     common.dic.getDicInfo({ dictType: this.config.dicKey }, res => {
    //       this.array = res
    //     })
    //   }
    // },
    reset () {
      this.form.data.select = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.has-prefix-icon {
  position: relative;

  /deep/ .el-form-item__content {
    .el-input__inner {
      padding-left: 30px;
    }
    .prefixIcon-cls {
      position: absolute;
      top: 0;
      left: 3px;
      color: #c0c4cc;
    }
  }
}
</style>
